<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import {
  addMyCertificateApi,
  deleteActualOutPutApi, deleteCertificateApi,
  detailsCertificateApi,
  getAllCertificateTypeApi, getMyCertificateListApi,
  getMyTeacherApi, updateCertificateApi, updateMyCertificateApi
} from "@/api/school.js";
import FileUpload from "@/components/FileUpload/index.vue";
import {formatDateNoTime} from "../../../utils/index.js";
import ImageUpload from "@/components/ImageUpload/index.vue";

const router = useRouter()
const {proxy} = getCurrentInstance();

const state = reactive({
  studentList: [],
  formRules: {
    acTitle: [
      {required: true, message: '请输入证书名称', trigger: 'blur'},
    ],
    certTypeId: [
      {required: true, message: '请选择证书类型', trigger: 'change'},
    ],
    acScore: [
      {required: true, message: '请输入考试得分', trigger: 'blur'},
    ],
    acPass: [
      {required: true, message: '请选择是否通过', trigger: 'change'},
    ],
    acFile: [
      {required: true, message: '请上传证书材料', trigger: 'change'},
    ],
    acLevel: [
      {required: true, message: '是否等级考试', trigger: 'change'},
    ],
    acDanwei: [
      {required: true, message: '请输入证书批准单位', trigger: 'blur'},
    ],
    acTime: [
      {required: true, message: '请选择时间', trigger: 'change'},
    ],
    isGraduated: [
      {required: true, message: '请选择是否毕业要求证书', trigger: 'change'},
    ],
  },
  editForm: {
    id: '',
    stuId: '',
    acTitle: '',
    acFile: '',
    isGraduated: '',
  },
  achievementTypeList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    acTitle: '',
    acFileType: '',
    acAudit: '',
  },
  total: 0,
  title: '新增',
  teacherName: '',
})


const showDia1 = ref(false)
const selectable = (row) => ![].includes(row.id)
const handleAdd = () => {
  showDia1.value = true
}

const handleUploadSuccess = (response, file, fileList) => {
  console.log(response, file, fileList)
}

const handleEdit = async (id) => {
  // 获取详情
  const res = await detailsCertificateApi({id})
  if (res.code == 200) {
    state.editForm = res.data
    showDia1.value = true
    state.title = '编辑'
  }
}

const getDataList = async () => {
  if(state.queryParams.acTime){
    state.queryParams.startTime = state.queryParams.acTime[0]
    state.queryParams.endTime = state.queryParams.acTime[1]
  }
  const res = await getMyCertificateListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("queryRef");
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}

const getMyTeacherInfo = async () => {
  const res = await getMyTeacherApi()
  if (res.code === 200) {
    state.teacherName = res.data.nickName
  }
}

const submitForm = () => {
  proxy.$refs["formRef"].validate(async (valid) => {
    if (valid) {
      let res = ''
      if (state.editForm.id === '') {
        res = await addMyCertificateApi(state.editForm)
      } else {
        res = await updateMyCertificateApi(state.editForm)
      }

      if (res.code == 200) {
        proxy.$message.success('操作成功')
        handleClose()
        await getDataList()
      }
    }
  })
}

const handleClose = () => {
  showDia1.value = false
  state.editForm = {
    id: '',
    stuId: '',
    acTitle: '',
  }
  proxy.resetForm("formRef");
  state.title = '新增'
}

const handleDelete = (id) => {
  proxy.$modal.confirm('是否删除该数据？').then(async () => {
    const res = await deleteCertificateApi({id})
    if (res.code == 200) {
      proxy.$modal.msgSuccess("删除成功")
    }
    await getDataList()
  })
}

const getAllCertTypeList = async () => {
  const res = await getAllCertificateTypeApi()
  if (res.code == 200) {
    state.certTypeList = res.data
  }
}

// 改变类型选择
const changeType = (e) => {
  const one = state.certTypeList.find(item => item.id === e)
  state.editForm.acLevel = one.certLevel
}

const closeDia = () => {
  showDia1.value = false
  proxy.resetForm("formRef");
  state.editForm = {}
}


const handleSelectionChange = (val) => {
  state.selectData = val
}

const handleExport = () => {
  if(state.selectData.length < 1){
    proxy.$modal.msgError("请选择需要导出的数据")
  }

  state.selectData.forEach(item => {
    proxy.download("/school/pacProSkillCert/export-word", {
      id: item.id
    },`${item.stuName}-${item.acTitle}.docx`);
  })
}


onMounted(() => {
  getDataList()
  getMyTeacherInfo()
  getAllCertTypeList()
})
</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <el-form :model="state.queryParams" ref="queryRef" label-width="auto" inline="true">
          <el-form-item label="证书名称">
            <el-input v-model="state.queryParams.acTitle"/>
          </el-form-item>
          <el-form-item label="上传时间段">
            <el-date-picker
                v-model="state.queryParams.acTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                style="min-width: 180px"
            />

          </el-form-item>
          <el-form-item label="审核状态">
            <el-select v-model="state.queryParams.acAudit" placeholder="请选择" style="min-width: 180px">
              <el-option label="待审核" :value="1"></el-option>
              <el-option label="审核通过" :value="2"></el-option>
              <el-option label="审核拒绝" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="成果管理">
      <template #btn-cont>
        <el-button type="primary" @click="handleExport">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </template>
      <template #content>
        <el-table :data="state.tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" :selectable="selectable" width="55"/>
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="acTitle" label="证书名称" align="center"/>
          <el-table-column prop="acTime" label="证书批准时间" align="center">
            <template #default="scope">
              {{ formatDateNoTime(scope.row.acTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="acDanwei" label="证书批准单位" align="center"/>
          <el-table-column prop="acLevel" label="是否通过" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.acPass === 0" type="info">未通过</el-tag>
              <el-tag v-if="scope.row.acPass === 1" type="success">已通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isGraduated" label="是否毕业要求证书" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.isGraduated === 0" type="info">否</el-tag>
              <el-tag v-if="scope.row.isGraduated === 1" type="success">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="acAudit" label="审核状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.acAudit === 1" type="info">待审核</el-tag>
              <el-tag v-if="scope.row.acAudit === 2" type="success">审核通过</el-tag>
              <el-tag v-if="scope.row.acAudit === 3" type="danger">审核拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleEdit(scope.row.id)">详情查看/编辑</el-button>
              <el-button type="danger" size="small" link @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"
          />
        </div>
      </template>
    </CardBox>

    <el-dialog :title="state.title" v-model="showDia1" width="800" center>
      <div>
        <el-form label-width="150px" ref="formRef" :rules="state.formRules" :model="state.editForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="证书批准时间" prop="acTime">
                <el-date-picker
                    v-model="state.editForm.acTime"
                    type="date"
                    placeholder="选择日期"
                    style="width: 200px;"
                    value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="证书批准单位" prop="acDanwei">
                <el-input v-model="state.editForm.acDanwei" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="证书名称" prop="acTitle">
                <el-input v-model="state.editForm.acTitle" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <!--            <el-col :span="24">-->
            <!--              <el-form-item label="证书类型" prop="certTypeId">-->
            <!--                <el-select v-model="state.editForm.certTypeId" placeholder="请选择" @change="changeType">-->
            <!--                  <el-option-->
            <!--                      v-for="item in state.certTypeList"-->
            <!--                      :key="item.id"-->
            <!--                      :label="item.certName"-->
            <!--                      :value="item.id"-->
            <!--                  />-->
            <!--                </el-select>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="24">-->
            <!--              <el-form-item label="是否等级考试" prop="acLevel">-->
            <!--                <el-radio-group v-model="state.editForm.acLevel" disabled>-->
            <!--                  <el-radio label="是" :value="1"></el-radio>-->
            <!--                  <el-radio label="否" :value="0"></el-radio>-->
            <!--                </el-radio-group>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="24" v-if="state.editForm.acLevel == 1">-->
            <!--              <el-form-item label="等级考试得分" prop="acScore">-->
            <!--                <el-input v-model="state.editForm.acScore"/>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
<!--            <el-col :span="24">-->
<!--              <el-form-item label="是否通过等级考试" prop="acPass">-->
<!--                <el-radio-group v-model="state.editForm.acPass">-->
<!--                  <el-radio label="通过" :value="1"></el-radio>-->
<!--                  <el-radio label="未通过" :value="0"></el-radio>-->
<!--                </el-radio-group>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="24">
              <el-form-item label="是否毕业要求证书" prop="isGraduated">
                <el-radio-group v-model="state.editForm.isGraduated">
                  <el-radio label="是" :value="1"></el-radio>
                  <el-radio label="否" :value="0"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上传证书材料：" label-position="top" label-width="150" prop="acFile">
                <div class="uploadBox">
<!--                  <FileUpload-->
<!--                      :multiple="false"-->
<!--                      :limit="1"-->
<!--                      v-model="state.editForm.acFile"-->
<!--                  />-->
                  <ImageUpload
                      :limit="1"
                      v-model="state.editForm.acFile"
                  />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form label-width="150" label-position="top">

        </el-form>

        <div class="footer">
          <el-button @click="closeDia">返回</el-button>
          <el-button type="primary" @click="submitForm" v-if="!state.editForm.id || state.editForm.acAudit === 1">确认
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.uploadBox {
  margin-left: 50px;
}

.footer {
  text-align: center;
}
</style>
